<template>
	<div class="head" :style="'padding-top: ' + statusBarHeight + 'px;'">
		<div class="warp">
			<div class="back" @click="goBack"><image class="back_img" src="../static/icons/arrows.png" alt=""></div>
			<div class="search-input">
				<div class="warp">
					<image class="search-img" v-if="searchIsShow" src="../static/icons/search.png" mode=""></image>
					<input class="input" style="text-align: center;" type="text" placeholder-style="color:#d8d8d8;font-size:26upx" placeholder="请输入想要搜索的商品" v-model="keyword" confirm-type="search" @confirm="submitForm" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {};
	},
	props: {
		keyword: {
			type: String,
			default: () => {
				return '';
			}
		},
		searchIsShow: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		rightIcon: {
			type: String,
			default: () => {
				return '';
			}
		},
		rightText: String,
		isTransparent: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		iconStyle: {
			type: String,
			default: () => {
				return '';
			}
		},
		leftIcon: {
			type: String,
			default: () => {
				return '';
			}
		},
		leftIconStyle: {
			type: String,
			default: () => {
				return '';
			}
		},
		isLeftIconPoint: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		middleTag: {
			type: String,
			default: () => {
				return '';
			}
		},
		middleRange: {
			type: Array,
			default: () => {
				return [];
			}
		},
		middleRangeKey: {
			type: String,
			default: () => {
				return '';
			}
		},
		middlePickerValue: {},
		middlePickerMode: {
			type: String,
			default: () => {
				return 'selector';
			}
		},
		currentCity: {
			type: String,
			default: () => {
				return '深圳市';
			}
		}
	},
	methods: {
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		handlerClick() {
			this.$emit('submitForm', 1);
		}
	},
	computed: {
		...mapState(['statusBarHeight'])
	},
	keyword(newVal, oldVal) {
	  if (newVal.length !== 0) {
				this.searchIsShow = false
				console.log("监听输入框是否为空，空就显示搜索icon")
	  }else{
				 this.searchIsShow = true
			}
	}
};
</script>

<style scoped lang="scss">
//顶部导航栏
.back_img{
	width: 58upx;
	height: 58upx;
}
.head{
	width: 100%;
	background: #fff;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	.warp {
		width: 100%;
		height: 44px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		font-size: 0;
		border-bottom: 1px solid rgba(228, 226, 242, 0.5);
	}
	.back {
		position: absolute;
		left: 0;
		font-size: 14px;
		line-height: 1;
		color: #999;
		z-index: 6;
		padding: 20upx 40upx 20upx 10upx;
	}
	.search-input {
		display: flex;
		height:100%;
		justify-content: center;
		align-items: center;
		font-size: 0;
		margin-left: -70upx;
		.warp {
			width: 460upx;
			height: 60upx;
			background:rgba(120,110,192,0.1);
			border-radius:35px;
			border:1px solid rgba(255,255,255,0.51);
			box-sizing: border-box;
			font-size: 0;
			align-items: center;
			justify-content: center;
			.input {
				width: 400upx;
				font-size: 30upx;
				line-height: 42upx;
				color: #999999;
			}
		}
	}
}
</style>
